<template>
    <el-main class="pug-imgbox-main" v-loading="loading">
        <div class="top">
           <div class="items" v-for="item in imageList">
            <el-card shadow="hover" :body-style="{ padding: '0' }" :class="{'border-blue-300':item.checked}">
                <el-image :src="item.src" fit="cover" class="w-full h-[150px]"/>
                <div class="text-center">我是标题</div>
                <div class="flex justify-center items-center p-2">
                    <el-checkbox v-if="openChoose" v-model="item.checked"  @change="handleChooseImage(item)"></el-checkbox>
                    <el-button type="primary" text size="small" @click="">重命名</el-button>
                    <el-button type="primary" text size="small" @click="">删除</el-button>
                </div>

            </el-card>
           </div>
        </div>
        <div class="page">
         <el-pagination layout="prev,pager,next" 
         :total="total" :current-page="pageNo" 
         :page-size="pageSize"
          @current-change="loadData" background></el-pagination>
        </div> 
    </el-main>

    <el-drawer title="上传组件" v-model="uploadDrawer" direction="rtl" size="40%"
    :destroy-on-close="true" :show-close="true" :wrapperClosable="true">
          <pug-upload-file @success="handlerSuccess"></pug-upload-file> 
    </el-drawer>
    
</template>
<script setup>

import { ref,reactive,computed} from 'vue';
import {toast} from '@/utils/utils.js'

const pageNo = ref(1);
const total = ref(100);
const pageSize = ref(10);
const loading = ref(false);
const src = 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'

defineProps({
  openChoose:{
    type:Boolean,
    default:false
  }
})


const imageList = ref([
  {id:1,name:"zhangsan1",checked:false,src:src},
  {id:2,name:"zhangsan2",checked:false,src:src},
  {id:3,name:"zhangsan3",checked:false,src:src},
  {id:4,name:"zhangsan1",checked:false,src:src},
  {id:5,name:"zhangsan2",checked:false,src:src},
  {id:6,name:"zhangsan3",checked:false,src:src},
  {id:7,name:"zhangsan3",checked:false,src:src},
  {id:8,name:"zhangsan2",checked:false,src:src},
  {id:9,name:"zhangsan3",checked:false,src:src},
  {id:10,name:"zhangsan4",checked:false,src:src}
])


const loadData = (p) => {
  loading.value = true;
  alert("当前页是：" + p)
  pageNo.value = p;
  loading.value = false;
}

const selectData = (id)=>{
  pageNo.value = 1;
  alert("搜索的分类是：" + id)
  loadData(id,pageNo.value);
}


// 文件上传
const uploadDrawer = ref(false);
const openUploadDrawer = ()=>{
  uploadDrawer.value = true;
}


const handlerSuccess = (response)=>{
  console.log("response",response);
}


const choseImage = computed(()=>{
  return imageList.value.filter(item=>item.checked);
})
var emit =  defineEmits(["choose"]);
const handleChooseImage = (item)=>{
  if(item.checked && choseImage.value.length > 1){
    toast("只能选择一张","warning");
    item.checked = false;
    return;
  }

  emit("choose",choseImage.value)
}

defineExpose({
  selectData,
  openUploadDrawer
})


</script>
<style>
.pug-imgbox-main{
  position: relative;
}

.pug-imgbox-main .top{
  position: absolute;
  top:0;
  right: 0;
  left:0;
  overflow-y: auto;
  display: grid;
  padding: 20px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}



.pug-imgbox-main .page{
  position: absolute;
  right: 0;
  left:0;
  bottom:0;
  height:50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top:1px solid #eee;
}

</style>